<template>
  <nav class="fixed top-0 left-0 bottom-0 w-64 bg-slate-900 shadow-lg z-50 flex flex-col">
    <div class="p-4 border-b border-slate-700">
      <h1 class="text-xl font-bold text-white text-center">新能源汽车充电调度系统</h1>
    </div>

    <div class="flex-1 overflow-y-auto py-4">
      <router-link
          v-for="item in navigationItems"
          :key="item.path"
          :to="item.path"
          :class="[
          'mx-4 my-2 px-4 py-3 rounded-md text-sm font-medium transition-colors duration-200 flex items-center',
          $route.path === item.path
            ? 'bg-primary-600 text-white'
            : 'text-gray-300 hover:bg-gray-700 hover:text-white'
        ]"
      >
        <component :is="item.icon" class="w-5 h-5 mr-3" />
        <span>{{ item.name }}</span>
      </router-link>
    </div>

    <div class="p-4 border-t border-slate-700 text-gray-400 text-xs text-center">
      当前版本: v1.0.0
    </div>
  </nav>
</template>

<script setup lang="ts">
import {
  Monitor,
  Warning,
  Operation,
  DataAnalysis
} from '@element-plus/icons-vue'

const navigationItems = [
  {
    name: '车辆监测',
    path: '/monitor',
    icon: Monitor
  },
  {
    name: '异常识别',
    path: '/anomaly',
    icon: Warning
  },
  {
    name: '调度优先级',
    path: '/priority',
    icon: Operation
  },
  {
    name: '负荷平衡',
    path: '/balance',
    icon: DataAnalysis
  }
]
</script>

<style scoped>
nav {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
}

.router-link-active:not(.exact-active) {
  background-color: rgb(128, 128, 128);
  color: white;

}
</style>